<template>
	
	<view class="wmpopup" @touchmove.stop.prevent="">
		
		
		<view class="wmpopup-box">
			
			<view class="xflex-x-between">
				<view class="wmpopup-title">
					请选择入住地点
				</view>
				<image @click="close()" class="wmpopup-gb" src="/static/image/index/popup-gb.png" mode=""></image>
			</view>
			
			<view class="xmt32 xbb8D xpb32">
				<view class="xfz32 xmt12 xc1">
					星级
				</view>
				
				<view class="wmpopup-leve xmt32">
					<view class="wmpopup-leve-item  xflex-x-center" :class="counter.enterInfo.star_id == item.id?'active':''" @click="onStar(item)" v-for="(item,index) in info.typeList" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>
			
			<scroll-view scroll-y="true" style="height: 750rpx;">
				<view class="" v-for="(item,index) in counter.enterInfo.house" :key="index">
					<view class="xmt32 xbb8D xpb32">
						<view class="xfz32 xmt12 xc1">
							房型
						</view>
						
						<view class="wmpopup-leve xmt32">
							<view class="wmpopup-leve-item xflex-x-center" @click="addhouseType(index,items.id)" :class="counter.enterInfo.house[index].type_id == items.id?'active':''" v-for="(items,indexs) in info.starList" :key="indexs">
								{{items.name}}
							</view>
						</view>
					</view>
					
					
					<view class="xmt20 wmpopup-people">
						<view class="">
							客房{{index+1}}
						</view>
						
						<view class="xflex-x-between xbb8D xpb40 xpt40">
							<view class="xfz32 xfw500 xc1">
								成人
							</view>
							<view class="xflex-x">
								<image class="wmpopup-people-icon xmr20" @click="reducehouse('adult',index)" src="/static/image/index/jian.png" mode=""></image>
								<view class="wmpopup-people-num xflex-x-center xfz30 xfw500">
									{{item.adult}}
								</view>
								<image class="wmpopup-people-icon xml20" @click="addhouse('adult',index)" src="/static/image/index/add.png" mode=""></image>
							</view>
						</view>
						
						<view class="xflex-x-between xbb8D xpb40 xpt40">
							<view class="xfz32 xfw500 xc1">
								儿童
							</view>
							<view class="xflex-x">
								<image class="wmpopup-people-icon xmr20" @click="reducehouse('children',index)" src="/static/image/index/jian.png" mode=""></image>
								<view class="wmpopup-people-num xflex-x-center xfz30 xfw500">
									{{item.children}}
								</view>
								<image class="wmpopup-people-icon xml20" @click="addhouse('children',index)" src="/static/image/index/add.png" mode=""></image>
							</view>
						</view>
					</view>
					
					<view class="add xtar xmt32" v-if="index !=0" @click="detai(index)">
						删除
					</view>
				</view>
			</scroll-view>
			
			<view class="add xtar xmt32" @click="pushhouse">
				添加另一间客房
			</view>
			
			<view class="btn" @click="close()">
				确定
			</view>
		</view>
		
		
		
	</view>
	
</template>

<script setup>
	import {ref,onBeforeMount, reactive,defineEmits} from "vue"
	
	import {hotelstar,hoteltype} from "@/network/home.js"
	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	let star = ['任何',"1星/经济型",'2星/舒适型','3星/中档型',"4星/高档型",'5星/豪华型','奢华型']
	const emit= defineEmits(['close'])
	
	// 关闭弹窗
	const close = () =>{
		emit('close')
	}
	
	let info = reactive({
		starList:[],
		typeList:[]
	})
	// 房型
	hoteltype().then(res=>{
		console.log(res);
		info.starList = [{id:0,name:'任何'},...res.data]
	})
	
	const detai = (index) =>{
		if(counter.enterInfo.house.length==1)return
		counter.enterInfo.house.splice(index,1)
	}
	// 星级
	hotelstar().then(res=>{
		console.log(res);
		info.typeList = [{id:0,name:'任何'},...res.data]
	})
	
	// 添加
	const pushhouse = () =>{
		counter.enterInfo.house.push({
			type_id:'0',
			adult:1,
			children:0
		})
	}
	
	const reducehouse = (name,index)=>{
		console.log(counter.enterInfo.house[index][name]);
		if(counter.enterInfo.house[index][name]<=0)return
		
		counter.enterInfo.house[index][name] = counter.enterInfo.house[index][name]-1
	}
	
	const addhouse =  (name,index)=>{
		counter.enterInfo.house[index][name] = counter.enterInfo.house[index][name]+1
	}
	
	const addhouseType = (index,value) =>{
		counter.enterInfo.house[index].type_id = value
		
	}
	
	const onStar = (item) =>{
		counter.enterInfo.star_id = item.id
		counter.enterInfo.type = item.name
	}
	
	
	
</script>

<style lang="scss">
	.wmpopup {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		z-index: 3;
		background-color: #00000070;
		overflow: hidden;
	
		&-box {
			position: absolute;
			padding: 30rpx 31rpx;
			box-sizing: border-box;
			width: 750rpx;
			height: 85%;
			bottom: 0;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}
	
		&-gb {
			width: 40rpx;
			height: 40rpx;
		}
	
		&-title {
			font-weight: bold;
			font-size: 40rpx;
			color: #222222;
		}
		
		&-leve {
			// display: grid;
			// grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 18rpx;
			display: flex;
			flex-wrap: wrap;
			
			&-item {
				padding: 0 20rpx;
				height: 50rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.active {
			background: #0EBBFB;
			color: #FFFFFF;
		}
		
		&-people {
			&-icon {
				width: 50rpx;
				height: 50rpx;
			}
			
			&-num {
				width: 94rpx;
				height: 50rpx;
				background: #F2F2F2;
			}
		}
		.add {
			font-weight: 500;
			font-size: 28rpx;
			color: #0EBBFB;
		}
		
		.btn {
			width: 630rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			margin: auto;
			text-align: center;
			line-height: 88rpx;
			margin-top: 100rpx;
		}
	}
	
	
	
	
	
</style>index